<template>
   <div>
       <div class="h">头部</div>
       <router-view class="b"></router-view>

       <!-- <button @click="goMusic">跳转到音乐</button> -->
       <div class="f">底部</div>

       <button @click="goMusic">跳转到音乐</button>
       <button @click="testPrams">测试编程导航传递参数</button>       
       
   </div>
</template>

<script>
   export default {
       data () {
       return {

       }
   },
   methods: {
       goMusic(){
           this.$router.push('/music')
       },
       testPrams(){
           this.$router.push({
            //    查询字符串的方式传递参数   /music?id=&name=2
               name: 'music',query:{id:1,name:2}
           })
       }
   }
 }
</script>

<style scoped>
    .h{
        height: 100px;
        background-color: darkgoldenrod;
    }
    .b{
        height: 100px;        
        background-color:skyblue;
    }
    .f{
        height: 100px;
        background-color: darkcyan;
    }
</style>
